<template>
  <div class="filter-list">
    <div
      class="filter-item"
      @click="topage('/houseDetail', item.id)"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="filter-item_left">
        <div class="img-box">
          <img class="house-img" :src="item.house_banner[0]" alt="" />
        </div>
        <div class="filter-item_right">
          <div class="house-title pointer">
            {{ item.house_title }} <text>{{ item.sale_status }}</text>
          </div>
          <div class="type-wrapper">
            <div class="type-item pointer">户型 {{ item.parlour }}室</div>
            <div class="type-item pointer">面积 {{ item.sale_area }}㎡</div>
          </div>
          <div class="type-wrapper">
            <div class="type-item pointer">类型 {{ item.pro_type }}</div>
            <div class="type-item pointer">
              {{ item.city }} {{ item.cate_circle }}
            </div>
          </div>
          <div class="icon-wrapper">
            <div
              class="icon-box"
              v-for="(v, i) in itemChange(item.item_pro)"
              :key="i"
            >
              {{ v }}
            </div>
            <div class="icon-box">小户型</div>
          </div>
          <div class="look">浏览({{ item.click_num }})</div>
        </div>
      </div>
      <div class="price-box">
        <div>
          <div class="one-price">
            均价
            <text>{{ item.refer_price ? item.refer_price : "待定" }}</text>
            元/㎡
          </div>
          <div class="all-price">
            总价 {{ item.refer_price ? item.refer_total_price : "待定" }}万/套
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import {itemChange}  from  '../../hooks/help'
export default defineComponent({
  props: {
    list: Array,
  },
  setup(props) {
    const data = reactive({});
    const router = useRouter();
    const topage = (route, id) => {
      router.push({ path: route, query: { id } });
    };
   
    return {
      ...toRefs(data),
      topage,itemChange
    };
  },
});
</script>

<style lang="scss">
.filter-list {
  width: 940px;
  .filter-item {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid #efefef;
    &:hover {
      background: #f9f9f9;
    }
    .filter-item_left {
      display: flex;
      .img-box {
        width: 250px;
        height: 170px;
        overflow: hidden;
        margin-right: 38px;
      }
      .house-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        border-radius: 5px;

        transition: all 0.3s;
        &:hover {
          width: 100%;
          height: 100%;
          transform: scale(1.05);
        }
      }
    }
    .price-box {
      display: flex;
      align-items: center;
      text-align: center;
      .one-price {
        color: #ff6d6f;
        font-size: 14px;
        line-height: 1;
        text {
          color: #ff6d6f;
          font-size: 34px;
          font-weight: bold;
        }
      }
      .all-price {
        color: #969696;
        font-size: 14px;
        margin-top: 12px;
      }
    }
    .filter-item_right {
      .house-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        line-height: 1;
        &:hover {
          color: #47b3e3;
        }
        text {
          background: #0ad487;
          padding: 2px 6px;
          color: #fff;
          font-size: 10px;
          border-radius: 2px;
          margin-left: 10px;
          box-sizing: border-box;
          vertical-align: middle;
        }
      }
      .type-wrapper {
        line-height: 1;
        font-size: 14px;
        margin-top: 16px;
        color: #969696;
        display: flex;
        .type-item {
          width: 120px;
          margin-right: 20px;
        }
      }
      .icon-wrapper {
        display: flex;
        .icon-box {
          padding: 5px 7px;
          box-sizing: border-box;
          line-height: 1;
          background: #f0f4fb;
          border-radius: 2px;
          text-align: center;
          color: #969696;
          margin-right: 10px;
          font-size: 12px;
          margin-top: 16px;
        }
      }
      .look {
        font-size: 14px;
        margin-top: 28px;
        color: #666666;
      }
    }
  }
}
</style>